<template>
	<view class="collection">
		<navbar :showBack="true">我的收藏</navbar>
		<scroll-view scroll-y="true" class="collectionGoods" @scrolltolower="onreachBottom" :style="'height: calc(100vh - '+hei+'rpx);'">
			<view class="collectionGoods-view" :style="'min-height: calc(100vh - '+hei+'rpx);'">
				<navigator :url="'/pages/goods_detail/goods_detail?id=' + item.pid" class="item acea-row row-between-wrapper" v-for="(item,index) in list" :key="index">
					<view class="pic"><image :src="item.image" mode=""></image></view>
					<view class="text acea-row row-column-between">
						<view class="name line1">{{item.store_name}}</view>
						<view class="acea-row row-between-wrapper">
							<view class="money font-color">￥{{item.price}}</view>
							<view class="delete" @click.stop="del(item.pid)">删除</view>
						</view>
					</view>
				</navigator>
				<u-loadmore :status="status" margin-bottom="20"/>
			</view>
		</scroll-view>
		<!-- 进度条开始 -->
		<line-progress></line-progress>
		<!-- 进度条结束 -->
	</view>
</template>

<script>
	import api from "@/api/api.js";
	const app = getApp();
	export default{
		data(){
			return{
				page:1,
				limit:5,
				hei:0,
				status:"loadmore",
				list:[]
			}
		},
		onLoad() {
			this.hei = app.globalData.navHeight;
			this.getData(this.page,this.limit)
		},
		methods:{
			getData:function(page,limit){
				const that = this;
				this.status = "loading";
				api.collect.getCollectList(page,limit).then(e=>{
					console.log(e)
					if(e.status == 200){
						if(JSON.stringify(e.data) != "[]"){
							that.page = page;
							that.list = that.list.concat(e.data);
							that.status = "loadmore";
						}else{
							that.status = "nomore";
						}
					}else{
						uni.showToast({
							title:e.msg,
							icon:"none"
						})
					}
				})
			},
			del:function(id){
				const that = this;
				let list = this.list;
				uni.showModal({
					title:"确认删除",
					success() {
						api.collect.delCollect(id).then(e=>{
							if(e.status == 200){
								that.list = list.filter(e=>e.pid != id)
							}else{
								uni.showToast({
									title:e.msg,
									icon:"none"
								})
							}
						})
					}
				})
			},
			onreachBottom:function(){
				let page = this.page+1;
				this.getData(page,this.limit)
			}
		}
	}
</script>

<style>
	.collection .collectionGoods{
		background-color: #fff;
	}
	.collection .collectionGoods .collectionGoods-view{
		margin-bottom: 20rpx;
	}
	.collection .collectionGoods .item{
		margin-left: 30rpx;
		padding-right: 30rpx;
		border-bottom: 1rpx solid #eee;
		height: 180rpx;
	}
	.collection .collectionGoods .item:last-of-type{
		border-bottom:none;
	}
	.collection .collectionGoods .item .pic{
		width: 130rpx;
		height: 130rpx;
	}
	.collection .collectionGoods .item .pic image{
		border-radius: 6rpx;
	}
	.collection .collectionGoods .item .text{
		width: 535rpx;
		height: 130rpx;
		font-size: 28rpx;
		color: #282828;
	}
	.collection .collectionGoods .item .text .name{
		width: 100%;
	}
	.collection .collectionGoods .item .text .money{
		font-size: 26rpx;
	}
	.collection .collectionGoods .item .text .delete{
		font-size: 26rpx;
		color: #282828;
		width: 144rpx;
		height: 46rpx;
		border: 1px solid #bbb;
		border-radius: 4rpx;
		text-align: center;
		line-height: 46rpx;
	}
</style>
